<template>
  <WidgetContainer :data="data"
                   :context-menu="contextMenu"
                   :show-loading="isLoading">
    <q-card class="weather-card text-center">
      <q-card-section style="font-size: 0.8em;width: 90%" class="q-pa-sm absolute-center full-height">
        <strong>{{ weatherData.cityInfo.parent }} - {{ weatherData.cityInfo.city }}</strong>
        <div v-if="weatherData.data.forecast[0]">
          <div>
            <q-icon name="wb_sunny" color="yellow" style="font-size: 1.2em;"/>
            <span>今天</span>
            <span>{{ weatherData.data.forecast[0].type }}</span>
          </div>
          <div>
            <q-icon name="thermostat" color="red" style="font-size: 1.2em;"/>
            <span>{{ weatherData.data.forecast[0].high }}</span>
            <span>{{ weatherData.data.forecast[0].low }}</span>
          </div>
          <div>
            <q-icon name="air" color="green" style="font-size: 1.2em;"/>
            <span>{{ weatherData.data.forecast[0].fx }}</span>
            <span>{{ weatherData.data.forecast[0].fl }}</span>
          </div>
          <div>
            <q-icon name="tips_and_updates" color="primary" style="font-size: 1.2em;"/>
            <span>{{ weatherData.data.ganmao }}</span>
          </div>
        </div>
      </q-card-section>
    </q-card>
    <weather-edit-form
        v-model="formData"
        v-model:show="formShow"
        mode="update"
    ></weather-edit-form>
  </WidgetContainer>
</template>

<script>
import iInfo from '../../../api/info'
import WidgetContainer from '../components/WidgetContainer'
import WeatherEditForm from './management/WeatherEditForm'
import widget from 'src/mixins/widget'

export default {
  name: 'WeatherWidget',
  mixins: [widget],
  components: {
    WeatherEditForm,
    WidgetContainer
  },
  data () {
    return {
      weatherData: {
        cityInfo: {
          city: '郑州市',
          parent: '河南'
        },
        data: {
          ganmao: '',
          quality: '',
          pm10: '',
          pm25: '',
          forecast: [{
            type: '',
            high: '',
            low: '',
            fx: '',
            fl: ''
          }]
        }
      },
      options: {},
      isLoading: false
    }
  },
  watch: {
    formData () {
      this.options = this.formData.data || this.options
      this.initWeather()
    }
  },
  created () {
    this.options = this.formData.data || {
      province: {
        id: '10',
        name: '河南'
      },
      city: {
        id: '148',
        name: '郑州',
        cityCode: '101180101'
      }
    }
  },
  mounted () {
    this.initWeather()
  },
  methods: {
    async initWeather () {
      this.isLoading = true
      try {
        this.weatherData = await iInfo.weather({
          cityCode: this.options.city.cityCode
        })
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

<style scoped>

.weather-card {
  min-width: 106px;
  min-height: 106px;
}

</style>
